<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" @click="allprintview" icon="View">预览</el-button>
                <el-button type="primary" @click="allprintview" icon="Printer">打印</el-button>
                <sc-export
                    :queryType="'receiving-order/export'"
                    :queryList="queryList"
                    :fileName="'押金费用单'"
                    :selectedKeys="selectedKeys"
                />
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-row type="flex" style="flex-wrap:wrap">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="业务日期" label-width="100px" style="width: 100%;">
                                <el-date-picker
                                    style="width: 100%;"
                                    v-model="queryList.orderTime"
                                    type="datetimerange"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    range-separator="-"
                                    unlink-panels="true"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-time="defaultTime"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="单据编号" label-width="100px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入单据编号---"
                                    v-model="queryList.StorageOrderCode"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="要货单号" label-width="100px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入要货单号---"
                                    v-model="queryList.ApplyOrderCode"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="制单人" label-width="100px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入制单人---"
                                    v-model="queryList.DocumentsUser"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="修改人" label-width="100px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入修改人---"
                                    v-model="queryList.UpdateName"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                            <el-form-item label="审核人" label-width="100px" style="width: 100%;">
                                <el-input
                                    placeholder="---请输入审核人---"
                                    v-model="queryList.reviewed"
                                    style="width: 100%;"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>
        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'receiving-order/deposit-fee-group-pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                :row-class-name="setRowClass"
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                <el-table-column label="业务日期" prop="applyDate" min-width="120" sortable>
                    <template
                        #default="scope"
                    >{{ scope.row.applyDate? scope.row.applyDate.slice(0, 10):'' }}</template>
                </el-table-column>
                <el-table-column label="单据编号" prop="orderCode" min-width="250" sortable>
                    <template #default="scope">
                        <span
                            class="el-span-text"
                            @click="opPrintview(scope.row, scope.$index)"
                        >{{scope.row.orderCode}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店" prop="storeFullName" min-width="260" sortable></el-table-column>
                <el-table-column label="制单人" prop="documentsUser" min-width="100" sortable></el-table-column>
                <el-table-column label="修改人" prop="updateName" min-width="100" sortable></el-table-column>
                <el-table-column label="审核人" prop="reviewed" min-width="100" sortable></el-table-column>
                <el-table-column label="关联要货订单" prop="applyOrderCode" min-width="250" sortable></el-table-column>
                <el-table-column label="押金费" prop="totalAmount" min-width="140" sortable></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" min-width="240">
                    <template #default="scope">
                        <el-button-group>
                            <!-- <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opCheck(scope.row, scope.$index)"
                            >核对</el-button> -->
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opPrintview(scope.row, scope.$index)"
                            >预览</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opPrintview(scope.row, scope.$index)"
                            >打印</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            >查看</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <deposit-fee-check-dialog
        v-if="dialogDepositCheck"
        ref="depositFeeCheckDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDepositCheck = false"
    ></deposit-fee-check-dialog>

    <!-- 押金费用打印 -->
    <applyDepositFeePrint v-if="dialogPrint" ref="depositFeePrintDialog" @closed="dialogPrint = false"></applyDepositFeePrint>
</template>

<script>
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import depositFeeCheckDialog from "./applyDepositFeeCheck";
export default {
    components: {
        publicjs,
        depositFeeCheckDialog,
    },
    data() {
        return {
            materialTypeTree: [],
            orgType: "",
            columnList: [],
            queryList: {
                receivingOrderType:6,
            },
            selectionRows: [],
            selectedKeys:[],
            showCondition: false,
            dialogDepositCheck: false,
            dialogPrint: false,
            defaultTime: [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
        };
    },
    methods: {
        resetSearch() {
            this.queryList = {};
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        //核对
        opCheck(row) {
            this.dialogDepositCheck = true;
            this.$nextTick(() => {
                this.$refs.depositFeeCheckDialog.setData(row);
                this.$refs.depositFeeCheckDialog.open("Check");
            });
        },
        //查看
        opShow(row) {
            this.dialogDepositCheck = true;
            this.$nextTick(() => {
                this.$refs.depositFeeCheckDialog.setData(row);
                this.$refs.depositFeeCheckDialog.open("Show");
            });
        },
        setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
            console.log("this.selectionRows", this.selectionRows)
            this.selectedKeys= this.selectionRows.map((item)=>{ return  item.orderCode});
        },
        opPrintview(row) {
            this.dialogPrint = true;
            this.$nextTick(() => {
                var arr = [];
                arr.push(row);
                this.$refs.depositFeePrintDialog.setData(arr);
                this.$refs.depositFeePrintDialog.open("Show");
            });
        },
        allprintview() {
            if (this.selectionRows.length > 0) {
                this.dialogPrint = true;
                let uniqueArr = this.selectionRows.filter(
                    (item, index, self) =>
                        index ===
                        self.findIndex(
                            (t) => t.storageOrderCode === item.storageOrderCode
                        )
                );
                this.$nextTick(() => {
                    this.$refs.depositFeePrintDialog.setData(uniqueArr);
                    this.$refs.depositFeePrintDialog.open("Show");
                });
            } else {
                this.$message.error("请选择要打印的数据");
            }
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.opBindData();
    },
};
</script>

<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}
::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>




